<template>
	<view class="pa-b-130">
		<view class="width100">
			<image src="/static/img/my-bg2.png" mode='widthFix' class='width100'>
			</image>
		</view>
		<view class="p-r z-index3">
			<view class="ma-t-200">
				<view class="flex f-between f-center width80 ma-0" @click="toPage('set')">
					<view class="flex f-center">
						<view class="avatarimg">
							<image mode="widthFix" class="width100" src="/static/img/avatar.png"></image>
						</view>
						<view class="ma-l-20 tn-color-brown--dark">
							<view>粤通贸易</view>
							<view class="tn-text-md ma-t-10">15876948153</view>
							<view class="tn-text-md ma-t-10">粤通商务贸易有限公司</view>
						</view>
					</view>
					<view class="tn-icon-notice tn-color-brown tn-text-xxls" @click.stop="toPage('message')"></view>
				</view>
			</view>
			<view class="ma-20 pa-20 bg-fff b-r-15 ma-t-40">
				<view class="flex f-center t-center pa-tb-40">
					<view class="width50">
						<view>市值</view>
						<view class="ma-t-30 tn-color-red tn-text-xxl">¥<tn-count-to :startVal="0" fontColor="tn-color-red" :endVal="1250.62" :decimals="2"></tn-count-to></view>
						<view class="ma-t-20">7日 <span class="tn-color-red ma-l-20">+¥<tn-count-to :fontSize="30" fontColor="tn-color-red" :startVal="0" :endVal="2652.25" :decimals="2"></tn-count-to></span></view>
					</view>
					<view class="xian"></view>
					<view class="width50" @click="toPage('story')">
						<view>故事数</view>
						<view class="ma-t-30 tn-color-red tn-text-xxl"><tn-count-to :startVal="0" fontColor="tn-color-red" :endVal="2" ></tn-count-to></view>
						<view class="ma-t-20">在途 <span class="tn-color-red ma-lr-20">1</span> 正式 <span class="tn-color-red ma-l-20">1</span></view>
					</view>
				</view>
				<view class="b-t-1-F5 pa-20 flex f-between f-center" @click="toPage('withdraw',1)">
					<view>已提现金额</view>
					<view class="flex f-center">
						<view class="tn-color-red">¥<tn-count-to :fontSize="30" :startVal="0" fontColor="tn-color-red" :endVal="7653.62" :decimals="2"></tn-count-to></view>
						<view class="tn-icon-right c-aaa tn-text-xxl"></view>
					</view>
				</view>
				<view class="b-t-1-F5 pa-20 flex f-between f-center" @click="toPage('withdraw',0)">
					<view>申请中金额</view>
					<view class="flex f-center">
						<view class="tn-color-red">¥<tn-count-to :fontSize="30" :startVal="0" fontColor="tn-color-red" :endVal="438.62" :decimals="2"></tn-count-to></view>
						<view class="tn-icon-right c-aaa tn-text-xxl"></view>
					</view>
				</view>
			</view>
		</view>


		<view class="bg-fff ma-20 b-r-15">
			<view class="flex f-between f-center">
				<view class="pa-lr-40 pa-tb-20  tn-text-bold tn-text-xl tn-color-black">品牌故事</view>
				<!-- <view class="tn-text-sm c-aaa pa-r-20" @click="toPage('customer')">更多</view> -->
			</view>
			<view class="pa-lr-40 pa-tb-20 b-t-1-F5"  @click="toPage('brandStory',item)">
				<view class="font-bold">醇香麦芽精酿啤酒‌500ML</view>
				<view class="c-aaa tn-text-sm ma-t-10">推广时间：2025-01-01 ~ 2025-06-30</view>
				<view class="flex f-center f-between t-center ma-tb-40">
					<view class="width30">
						<view>售卖数</view>
						<view class="ma-t-30 tn-color-red tn-text-xxl"><tn-count-to :startVal="0" :fontSize="40" fontColor="tn-color-red" :endVal="13250" ></tn-count-to></view>
						<view class="ma-t-20">7日 <span class="tn-color-red ma-l-10">+<tn-count-to :fontSize="30" :startVal="0" fontColor="tn-color-red" :endVal="120"></tn-count-to></span></view>
					</view>
					<view class="xian"></view>
					<view class="width30">
						<view>总金池</view>
						<view class="ma-t-30 tn-color-red tn-text-xxl">¥<tn-count-to :startVal="0" :fontSize="40" fontColor="tn-color-red" :endVal="7654.62" :decimals="2"></tn-count-to></view>
						<view class="ma-t-20">7日 <span class="tn-color-red ma-l-10">+¥<tn-count-to :fontSize="30" :startVal="0" fontColor="tn-color-red" :endVal="50.62" :decimals="2"></tn-count-to></span></view>
					</view>
					<view class="xian"></view>
					<view class="width30">
						<view>已发积分</view>
						<view class="ma-t-30 tn-color-red tn-text-xxl"><tn-count-to :startVal="0" :fontSize="40" fontColor="tn-color-red" :endVal="543.62"></tn-count-to></view>
						<view class="ma-t-20">7日 <span class="tn-color-red ma-l-10">+<tn-count-to :fontSize="30" :startVal="0" fontColor="tn-color-red" :endVal="150"></tn-count-to></span></view>
					</view>
				</view>
				<view class="flex f-between width100 t-center bg-f6 b-r-15 pa-tb-30">
					<view class="width25">
						<view>100</view>
						<view class="ma-t-10">股东数</view>
					</view>
					<view class="width25">
						<view>26</view>
						<view class="ma-t-10">批发商</view>
					</view>
					<view class="width25">
						<view>47</view>
						<view class="ma-t-10">门店</view>
					</view>
					<view class="width25">
						<view>27</view>
						<view class="ma-t-10">帮买</view>
					</view>
				</view>
			</view>
			<view class="pa-lr-40 pa-tb-20 b-t-1-F5"  @click="toPage('brandStory',item)">
				<view class="font-bold">‌沁爽青柠气泡水‌‌500ML</view>
				<view class="c-aaa tn-text-sm ma-t-10">推广时间：2025-01-01 ~ 2025-06-30</view>
				<view class="flex f-center f-between t-center ma-tb-40">
					<view class="width30">
						<view>售卖数</view>
						<view class="ma-t-30 tn-color-red tn-text-xxl"><tn-count-to :startVal="0" :fontSize="40" fontColor="tn-color-red" :endVal="6250" ></tn-count-to></view>
						<view class="ma-t-20">7日 <span class="tn-color-red ma-l-10">+<tn-count-to :fontSize="30" :startVal="0" fontColor="tn-color-red" :endVal="420"></tn-count-to></span></view>
					</view>
					<view class="xian"></view>
					<view class="width30">
						<view>总金池</view>
						<view class="ma-t-30 tn-color-red tn-text-xxl">¥<tn-count-to :startVal="0" :fontSize="40" fontColor="tn-color-red" :endVal="1154.62" :decimals="2"></tn-count-to></view>
						<view class="ma-t-20">7日 <span class="tn-color-red ma-l-10">+¥<tn-count-to :fontSize="30" :startVal="0" fontColor="tn-color-red" :endVal="150.62" :decimals="2"></tn-count-to></span></view>
					</view>
					<view class="xian"></view>
					<view class="width30">
						<view>已发积分</view>
						<view class="ma-t-30 tn-color-red tn-text-xxl"><tn-count-to :startVal="0" :fontSize="40" fontColor="tn-color-red" :endVal="1543.62"></tn-count-to></view>
						<view class="ma-t-20">7日 <span class="tn-color-red ma-l-10">+<tn-count-to :fontSize="30" :startVal="0" fontColor="tn-color-red" :endVal="550"></tn-count-to></span></view>
					</view>
				</view>
				<view class="flex f-between width100 t-center bg-f6 b-r-15 pa-tb-30">
					<view class="width25">
						<view>76</view>
						<view class="ma-t-10">股东数</view>
					</view>
					<view class="width25">
						<view>16</view>
						<view class="ma-t-10">批发商</view>
					</view>
					<view class="width25">
						<view>45</view>
						<view class="ma-t-10">门店</view>
					</view>
					<view class="width25">
						<view>15</view>
						<view class="ma-t-10">帮买</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-fff ma-20 b-r-15">
			<view class="flex f-between f-center">
				<view class="pa-lr-40 pa-tb-20  tn-text-bold tn-text-xl tn-color-black">最新公告</view>
				<view class="tn-text-sm c-aaa pa-r-20" @click="toPage('notice')">更多</view>
			</view>

			<view class="b-t-1-F5" style="width: 90vw;overflow: hidden;margin: 0px auto;">
				<tn-tabs :list="scrollList" :current="current" @change="tabChange" activeColor="#000" :bold="true"
					:fontSize="30"></tn-tabs>
			</view>

			<view class="pa-lr-40 pa-tb-20 b-t-1-F5" v-for="(item,index) in noticelist.slice(0,3)" :key="index" :class="index!=0?'':''"
				@click="toPage('customerdetail',item)">
				<view class="flex">
					<view class="tn-icon-trusty-fill  tn-color-orangered tn-text-xxl ma-t-10"></view>
					<view class="noticecon ma-l-20">
						<view class="">{{item.name}}</view>
						<view class="flex f-between f-center ma-t-20">
							<!-- <view class="tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">#公告</view> -->
							<view class="c-aaa tn-text-sm"><text class="tn-icon-time"></text>2025-09-28 16:57:52</view>
						</view>
					</view>
				</view>
				
				<!-- <view class="king-icon ">
					<text class='tn-icon-clip tn-color-white tn-text-lg tn-bg-indigo tn-round tn-padding-xs'></text>
					<text class='tn-text-xl tn-margin-left'>2025.9.11 15:26:20</text>
				</view>
				<view class='king-item tn-color-indigo tn-icon-science'>
					<view class="resume2 tn-main-gradient-blue--light tn-shadow-blur" style="padding: 20rpx 20rpx;">
						<text class="tn-margin-top-sm">
							醇香麦芽精酿啤酒‌500ML，国庆中秋促销，10月10日前9折优惠
						</text>
					</view>

				</view> -->
			</view>
		</view>
		<view class="bg-fff ma-20 b-r-15">
			<view class="flex f-between f-center">
				<view class="pa-lr-40 pa-tb-20  tn-text-bold tn-text-xl tn-color-black">积分记录</view>
				<view class="tn-text-sm c-aaa pa-r-20" @click="toPage('integral')">更多</view>
			</view>

			<view class="b-t-1-F5" style="width: 90vw;overflow: hidden;margin: 0px auto;">
				<tn-tabs :list="scrollList" :current="current1" @change="tabChange1" activeColor="#000" :bold="true"
					:fontSize="30"></tn-tabs>
			</view>
			<view class="tn-flex tn-flex-row-between tn-strip-bottom-min pa-40 b-t-1-F5"
				v-for="(item,index) in integral.slice(0,3)" :key="index">
				<view class="justify-content-item">
					<view class=" ">
						{{item.name}}
					</view>
					<view class="c-aaa tn-text-sm ma-t-20"><text class="tn-icon-time"></text>{{item.time}}</view>
				</view>
				<view class="justify-content-item tn-text-xl tn-padding-top">
					<view :class="'tn-color-' + item.color + ';'"> {{item.integral}} </view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				noticelist:[
					{
						name: '喜讯！冰萃冷泡果味茶销量大涨，10月30日将开股东大会，诚邀各位股东莅临！',
						time: '2022-05-20 22:45:29',
						color: 'blue--dark',
						integral: '+10'
					}, {
						name: '‌醇香麦芽精酿啤酒‌，国庆中秋促销，10月1日买二送一促销',
						time: '2022-05-18 20:20:50',
						color: 'purplered',
						integral: '-266'
					}, {
						name: '‌冰萃冷泡果味茶‌，国庆中秋促销，10月10日前9折优惠',
						time: '2022-05-18 18:11:19',
						color: 'blue--dark',
						integral: '+100'
					}, {
						name: '‌蜜桃乌龙风味汽水‌，国庆中秋促销，10月10日前9折优惠',
						time: '2022-05-17 13:42:42',
						color: 'blue--dark',
						integral: '+100'
					}, {
						name: '‌古法酿造米酒‌，国庆中秋促销，10月10日前9折优惠',
						time: '2022-05-16 12:14:43',
						color: 'blue--dark',
						integral: '+50'
					}, {
						name: '‌活力维C电解质水‌，国庆中秋促销，10月10日前9折优惠',
						time: '2022-05-15 10:21:08',
						color: 'blue--dark',
						integral: '+50'
					}, {
						name: '‌焦糖拿铁即饮咖啡‌，国庆中秋促销，10月10日前9折优惠',
						time: '2022-05-14 08:56:32',
						color: 'blue--dark',
						integral: '+50'
					}
				],
				integral: [{
					name: '醇香麦芽精酿啤酒‌500ML，购买2箱成功',
					time: '2022-05-20 22:45:29',
					color: 'blue--dark',
					integral: '+10'
				}, {
					name: '‌冰萃冷泡果味茶‌，提现（260积分）已提交。',
					time: '2022-05-18 20:20:50',
					color: 'purplered',
					integral: '-260'
				}, {
					name: '‌冰萃冷泡果味茶‌，购买7箱成功',
					time: '2022-05-18 18:11:19',
					color: 'blue--dark',
					integral: '+100'
				}, {
					name: '‌蜜桃乌龙风味汽水‌，购买32箱成功',
					time: '2022-05-17 13:42:42',
					color: 'blue--dark',
					integral: '+100'
				}, {
					name: '‌古法酿造米酒‌，购买11箱成功',
					time: '2022-05-16 12:14:43',
					color: 'blue--dark',
					integral: '+50'
				}, {
					name: '‌活力维C电解质水‌，购买3箱成功',
					time: '2022-05-15 10:21:08',
					color: 'blue--dark',
					integral: '+50'
				}, {
					name: '‌焦糖拿铁即饮咖啡‌，购买XXXX箱成功',
					time: '2022-05-14 08:56:32',
					color: 'blue--dark',
					integral: '+50'
				}],
				current: 0,
				current1: 0,
				scrollList: [{
						name: '全部',
					},
					{
						name: '醇香麦芽精酿啤酒‌'
					},
					{
						name: '‌‌冰萃冷泡果味茶‌‌'
					}
				],
				showpolicy: false,
				agentLevel: [],
			}
		},
		mounted() {
			_this = this;
			//_this.getload();
		},
		methods: {
			// tab选项卡切换
			tabChange(index) {
				this.current = index
			},
			// tab选项卡切换
			tabChange1(index) {
				this.current1 = index
			},
			getload() {
				var ivo = new Ivo("getChannelSummaryAtMiniApp");
				_this.$EngineV2.action(ivo, ovo => {
					console.log("A1101渠道信息，佣金客户数，最新客户5条数据，最新订单5条数据，消息数量", ovo)
				})
				var ivo1 = new Ivo("getChannelAgentLevelsAtMiniApp");
				_this.$EngineV2.action(ivo1, ovo1 => {
					console.log("A1101渠道等级说明", ovo1)
					_this.agentLevel = ovo1.result.data.wallet_classify_levels.sort((a, b) => b.min_score - a
						.min_score);
					console.log("_this.agentLevel", _this.agentLevel)
				})
			},
			toPage(name, val) {
				if (name == "integral") {
					_this.utilNav.navigateTo("/pages/index/integral")
				}
				if(name=="brandStory"){
					_this.utilNav.navigateTo("/pages/index/brandStory")
				}
				if (name == "notice") {
					_this.utilNav.navigateTo("/pages/index/notice")
				}
				if (name == "set") {
					_this.utilNav.navigateTo("/pages/my/set")
				}
				if (name == "message") {
					_this.utilNav.navigateTo("/pages/index/message")
				}
				if (name == "withdraw") {
					_this.utilNav.navigateTo("/pages/my/withdraw?tab="+val)
				}
				if(name=="story"){
					_this.utilNav.navigateTo("/pages/story/index")
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.label{
		
	}
	.noticecon{
		width: calc(100% - 50rpx);
	}
	.iconnotice{
		background-color: #f2f1f6;
		height: 100rpx;
		width: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #757885;
		border-radius: 100rpx;
		font-size: 60rpx;
	}
	.king-list {
		display: block;
	}

	.king-list .king-icon {
		width: 100%;
		text-align: left;
		padding: 20rpx 0 20rpx 37rpx;
		font-size: 26rpx;
		color: #888;
		display: block;
	}

	.king-list>.king-item {
		padding: 30rpx 30rpx 30rpx 120rpx;
		position: relative;
		display: block;
		z-index: 0;
	}

	.king-list>.king-item::after {
		content: "";
		display: block;
		position: absolute;
		width: 1rpx;
		background-color: #E6E6E6;
		left: 60rpx;
		height: 100%;
		top: 0;
		z-index: 8;
	}

	.king-list>.king-item::before {
		display: block;
		position: absolute;
		top: 36rpx;
		z-index: 9;
		background-color: #ffffff;
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		border: none;
		line-height: 50rpx;
		left: 36rpx;
	}


	/* 名片微调 */
	.img-solid {
		border: 2rpx solid #eee;
	}

	.share-img {
		position: fixed;
		/* padding: 10rpx; */
		width: 100rpx;
		height: 100rpx;
		/* top: 680rpx; */
		bottom: 200rpx;
		right: 20rpx;
		z-index: 1024;
		opacity: 0.8;
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
		border: none;
		border: 6rpx solid rgba(255, 255, 255, 0);
	}

	.resume {
		display: flex;
		justify-content: space-between;
		padding-top: 10rpx;
		border-radius: 6rpx;
		color: #666;
		line-height: 1.6;
	}

	.resume+.resume {
		margin-top: 20rpx;
	}

	.resume2 {
		padding-top: 10rpx;
		border-radius: 6rpx;
		display: block;
		color: #666;
		line-height: 1.6;
		text-align: justify;
	}

	/* 间隔线 start*/
	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/


	.bg-img-cont {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 350rpx;
		margin: 20rpx 0;
		border-radius: 8rpx;
	}



	// .button-no {
	//   border: none;
	//   width: 100%;
	//   height: 100%;
	//   background-color: rgba(0, 0, 0, 0);
	// }


	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 0rpx 20rpx 25rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/

	.see {
		display: flex;
		justify-content: space-between;
		padding-top: 10rpx;
		border-radius: 6rpx;
		color: #666;
		line-height: 1.6;
	}

	.ma-t-200 {
		margin-top: -360rpx;
	}

	.page-e {
		max-height: 100vh;
	}

	.xian {
		width: 1px;
		height: 100upx;
		background-color: #f5f5f5;
	}

	.avatarimg {
		width: 100upx;
		height: 100upx;
		border-radius: 100upx;
		overflow: hidden;
	}
</style>